
<div id="main-wrapper">
	<h1>参与投票</h1>
	<ul id="list-viewvote" class="list-group">
		<li class="list-group-item">
			<span class="li-label">题目</span>
			<p id="content"></p>
		</li>
		<li class="list-group-item">
			<span class="li-label">选项相关</span>
			<form id="form-vote">
				<div id="words" class="btn-group-vertical" data-toggle="buttons">
                    <script type="text/html" id= "label-tmpl">
                        <label class="btn btn-default btn-lg btn-block">
                            <input type="radio" name="word" value="<%- option %>">
                                   <%- option %>
                        </label>

                    </script>
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-primary btn-lg btn-block">
						提交投票
					</button>
				</div>
			</form>
		</li>
	</ul>
</div>

<script>
	var vid = parseInt(getHashParams()['vid']),
		$listWords = $('#words'),
		$formVote = $('#form-vote'),
        labelTmpl = _.template($listWords.find('#label-tmpl').html());



	$formVote.on('submit', function(ev) {
		ev.preventDefault();
		$listWords.find('.active input[type="radio"]').attr('checked', true);
	});
	$formVote.ajaxForm({
		url: '/do/a/vote?vid=' + vid,
		success: function(resObj) {
			var ok = resObj['ok'], msg = resObj['msg'];
			msg && notify(msg, ok);
			ok && loadFrame('#/viewvote?vid=' + vid);
		}
	});

	$.get('/do/a/viewvote?vid=' + vid, function(resObj) {
		var ok = resObj['ok'], msg = resObj['msg'];
		msg && notify(msg, ok);
		if (! ok) return window.history.back();

		var vote = resObj['vote'],
			content = vote['content'],
			options = vote['options'];

		$('#content').text(content);
		var pairs = _.pairs(options);
		$listWords.html(_.reduce(pairs, function(memo, pair, i){
            return memo + labelTmpl({
                option: pair[0]
            });
        }, '')
        );
	});
</script>